<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .header{
            height: 500px;
            background:url('images/bg.jpg') repeat-x;
        }
        .con{
            width: 968px;
            height: 376px;
            margin:47px auto 30px;
        }
        .footer{
            width: 968px;
            height: 51px;
            margin:0px auto;
            background:blanchedalmond;
        }
        .nav,.banner{
            width:968px;
            margin:0px auto;
        }
        .nav h1{
            float: left;
        }
        .nav ul{
            float: right;
        }
        .nav img{
            height: 43px;
            margin-top: 17px;
        }
        .nav li{
            float: left;
            margin-right: 5px;
            margin-top: 21px;
            padding:10px;
        }
        .nav li:hover{
            background:greenyellow;
            border-radius: 10px;
        }
        .nav a{
            color:#fff;
            font-size: 12px;
            text-decoration: none;
        }
         .nav{
             height: 74px;
         }
         .banner .left{
             float: left;
         }
         .banner .right{
             float: right;
         }
         .banner h6{
             font-size: 26px;
             margin: 54px 0px 14px 0px;
             font-weight: bold;
         }
         .banner .list li{
             line-height: 31px;
             font-size: 16px;
         }
         .banner .c li{
             font-size: 12px;
             line-height: 20px;
         }
         .banner .c a{
             color:green;
             text-decoration: none;
         }
         .con .left{
             width: 631px;
             float: left;
         }
         .con .right{
             width: 322px;
             float: right;
             color: chartreuse;
         }
         .con .left li{
             float: left;
             width: 217px;
             margin-top: auto;
         }
         .con .left .last{
             width: 196px;
         }
         .con .right i{
             color:red
         }
         .con .right span{
             float: right;
         }
         .footer .left{
             float: left;
         }
         .footer .right{
             float: right;
             ;
         }
         .footer .bottom{
             float: left;
             width: 968px;
         }
    </style>
</head>
<body>
    <div class="header">
        <div class="nav">
            <h1>
                <a href="">
                    <img src="images/logo.png" alt="">
                </a>
            </h1>
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">帮助与反馈</a></li>
                <li><a href="">公众平台</a></li>
                <li><a href="">开放平台</a></li>
                <li><a href="">微信支付</a></li>
                <li><a href="">微信广告</a></li>
                <li><a href="">企业微信</a></li>
                <li><a href="">表情开放平台</a></li>
                <li><a href="">微信网页版</a></li>
            </ul>
        </div>
        <div class="banner">
            <div class="left">
                <h6>微信，是一个生活方式</h6>
                <ul class="list">
                    <li>超过十亿人使用的手机应用
                    </li>
                    <li>支持发送语音短信、视频、图片和文字</li>
                    <li>
                        可以群聊，仅耗少量流量，适合大部分智能手机</li>
                </ul>
                <img src="images/dowm.png" alt="">
                <ul class="c">
                    <li>
                        <a href="">忘记了微信账号或密码？</a>
                    </li>
                    <li>
                        <a href="">自助解除登录或功能限制</a>
                    </li>
                    <li>
                        <a href="">冻结或解冻微信帐号</a>
                    </li>
                </ul>
            </div>
            <img src="images/com.png" alt="" class="right">
             
        </div>
    </div>
    <div class="con">
        <div class="left">
            <img src="images/list.png" alt="">
            <ul>
                <img src="images/a.png" alt="">
                <li>
                    <h6>微信网页版</h6>
                    <p>扫一扫二维码</p>
                    <p>就能在浏览器上使用微信</p>
                    <a href="">了解更多</a>
                </li>
                <li>
                    <h6>微信Mac版</h6>
                    <p>极致简洁，迅捷沟通</p>
                     
                    <a href="">了解更多</a>
                </li>
                <li class="last">
                    <h6>微信Windows 版</h6>
                    <p>让沟通更方便</p>
                    <a href="">了解更多</a>
                </li>
            </ul>
        </div>
        <div class="right">
            <h6>最新消息</h6>
            <ul>
                <li>
                    微信8.0.7 for iOS 正式版发布<i>NEW</i> <span>06-06</span>
                </li>
                <li>
                    微信8.0.6 for Android 正式版发布<i>NEW</i> <span>05-27</span>
                </li>
                <li>
                    微信3.0.0 for Mac 正式版发布<i>NEW</i> <span>03-29</span>
                </li>
                <li>
                    微信3.2.1 for Windows 正式版发布<i>NEW</i> <span>03-22</span>
                </li>
                <li>
                    关于部分iOS 9 用户无法更新微信<i>NEW</i> <span>01-28</span>
                </li>
                <li>
                    微信外部链接内容管理规范<i>NEW</i> <span>02-11</span>
                </li>
                <li>
                    微信网页版2.1版本发布<i>NEW</i> <span>01-17</span>
                </li>
                <li>
                    微信表情开放平台上线<i>NEW</i> <span>07-29</span>
                </li>
                <li>
                    官方辟谣公众号开通<i>NEW</i> <span>10-28</span>
                </li>
                <li><a href="">查看更多</a></li>
            </ul>
        </div>
    </div>
    <div class="footer">
       <p class="left"> 关于腾讯 | 服务条款 | 使用规范 | 客服中心 | 隐私保护指引</p>
        <p class="right">简体中文 |  繁體中文 |  English</p>
       <p class="bottom">sdfsdfsdf</p>
    </div>
</body>
</html>